﻿@{
    string initType = (string)ViewBag.InitType;
    bool remote = (bool)ViewBag.Remote;
}
<script src="~/Scripts/jquery-easyui-extensions/datagrid/jeasyui.extensions.datagrid.export.js"></script>
<div class="easyui-layout" data-options="fit:true,border:false">
    <div data-options="region:'north',border:false" style="height:100px;padding:15px;">
        以
        <input type="radio" id="local" name="way" value="local" checked="checked" /><span style="color:red;font-weight:bold;">本地数据（不分页）</span>
        <input type="radio" id="remote" name="way" value="remote" /><span style="color:red;font-weight:bold;">后台数据（分页） </span>
        方式
        &nbsp;&nbsp;&nbsp;&nbsp;
        @for (int a = 1; a <= 4; a++)
        {
            <a id="btn_@(a)" class="easyui-linkbutton" data-options="iconCls:'icon-add',toggle:true,selected:@(initType == a.ToString() ? "true" : "false")" style="font-size:12px;">
                加载@(a)号标题列
                @if (a == 2)
                {
                    @:（body数据带合并效果）
                }
            </a>
        }
        <br /><br />
        <span style="color:red;font-weight:bold;">你可以选择 数据源方式 ，再点击 标题列 按钮，就可以重新加载。 </span>
    </div>
    <div data-options="region:'center',border:false" style="border-top-width:1px;">
        <table id="dg"></table>
    </div>
</div>

<script>

    //冻结列（复杂）、常规列（复杂）
    var datagridInit1 = function (remote) {

        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({ field: 'AreaName', title: '地区', width: 150, rowspan: 2 });
            c1.push({ title: '性别', colspan: 2 });

            var c2 = [];
            c2.push({
                field: 'Sex1', title: '男', width: 90,
                formatter: function (val) {
                    return val + "（男0）";
                }
            });
            c2.push({
                field: 'Sex2', title: '女', width: 90,
                formatter: function (val) {
                    return val + "（女1）";
                }
            });

            result.push(c1);
            result.push(c2);

            return result;
        };

        var getColumns = function () {
            var result = [];

            var normal00000 = [
                { field: 'TS1', title: '测试1', width: 60 },
                { field: 'TS2', title: '测试2', width: 60 }
            ];

            result.push([{ title: "测试", colspan: 2 }]);
            result.push(normal00000);

            return result;
        };

        var options = {
            title: "列表",
            idField: "ID",
            rownumbers: false,
            fit: true,
            border: false,
            singleSelect: true,
            toolbar: [{
                iconCls: 'icon-edit',
                text: "导出本页数据到excel",
                handler: function () {
                    $("#dg").datagrid("exportData", { fileType: "excel", fileName: "1号标题" });
                }
            }],
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "get",
            url: "/Jsons/datagrid/datagrid-export-data.json",
            pagination: false
        };

        if (remote) {
            options.method = "post";
            options.url = "/Datagrid/GetDataGridJson";
            options.pagination = true;
            options.toolbar.push({
                iconCls: "icon-remove", text: "导出所有数据到excel", handler: function () {
                    $("#dg").datagrid("exportData", { fileType: "excel", fileName: "1号标题的后台所有数据", isAll: true });
                }
            });
        }

        $("#dg").datagrid(options);
    };

    //冻结列（复杂）、常规列（简单，其实也有合并）
    var datagridInit2 = function (remote) {

        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({ field: 'AreaName', title: '地区', width: 150, rowspan: 2 });
            c1.push({ title: '性别', colspan: 2 });

            var c2 = [];
            c2.push({
                field: 'Sex1', title: '男', width: 90,
                formatter: function (val) {
                    return val + "（男0）";
                }
            });
            c2.push({
                field: 'Sex2', title: '女', width: 90,
                formatter: function (val) {
                    return val + "（女1）";
                }
            });

            result.push(c1);
            result.push(c2);

            return result;
        };

        var getColumns = function () {
            var result = [];

            var normal00000 = [
                { field: 'TS1', title: '测试1', width: 60, rowspan: 2 },
                { field: 'TS2', title: '测试2', width: 60, rowspan: 2 }
            ];

            result.push(normal00000);
            result.push([]);

            return result;
        };

        var options = {
            title: "列表",
            idField: "ID",
            rownumbers: false,
            fit: true,
            border: false,
            singleSelect: true,
            toolbar: [{
                iconCls: 'icon-edit',
                text: "导出本页数据到excel",
                handler: function () {
                    $("#dg").datagrid("exportData", { fileType: "excel", fileName: "2号标题" });
                }
            }],
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "get",
            url: "/Jsons/datagrid/datagrid-export-data.json"
        };
        if (remote) {
            options.method = "post";
            options.url = "/Datagrid/GetDataGridJson";
            options.pagination = true;
            options.toolbar.push({
                iconCls: "icon-remove", text: "导出所有数据到excel", handler: function () {
                    $("#dg").datagrid("exportData", { fileType: "excel", fileName: "2号标题的后台所有数据", isAll: true });
                }
            });
        }
        options.onLoadSuccess = function (data) {
            $(this).datagrid("mergeCells", {
                index: 0,
                field: 'Sex1',
                colspan: 2,
                type: 'body'
            }).datagrid("mergeCells", {
                index: 1,
                field: 'Sex1',
                colspan: 2,
                type: 'body'
            }).datagrid("mergeCells", {
                index: 1,
                field: 'TS1',
                rowspan: 2,
                type: 'body'
            });

            var t = $(this), panel = t.datagrid("getPanel");
            var rowDom0 = panel.find("div.datagrid-view div.datagrid-body table tr.datagrid-row[datagrid-row-index=0]"),
                rowDom1 = panel.find("div.datagrid-view div.datagrid-body table tr.datagrid-row[datagrid-row-index=1]");
            var cellDom0 = rowDom0.find("td[field='Sex1'] .datagrid-cell"),
                cellDom1 = rowDom1.find("td[field='Sex1'] .datagrid-cell"),
                cellDom2 = rowDom1.find("td[field='TS1'] .datagrid-cell");

            cellDom0.parent().css({ "text-align": "center" });
            cellDom1.parent().css({ "text-align": "center" });
            cellDom2.parent().css({ "text-align": "center" });
        };

        $("#dg").datagrid(options);
    };

    //冻结列（简单，其实也有合并）、常规列（复杂）
    var datagridInit3 = function (remote) {

        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({ field: 'AreaName', title: '地区', width: 150, rowspan: 2 });
            c1.push({
                field: 'Sex1', title: '男', width: 90, rowspan: 2,
                formatter: function (val) {
                    return val + "（男0）";
                }
            });
            c1.push({
                field: 'Sex2', title: '女', width: 90, rowspan: 2,
                formatter: function (val) {
                    return val + "（女1）";
                }
            });

            var c2 = [];

            result.push(c1);
            result.push(c2);

            return result;
        };

        var getColumns = function () {
            var result = [];

            var normal00000 = [
                { field: 'TS1', title: '测试1', width: 60 },
                { field: 'TS2', title: '测试2', width: 60 }
            ];

            result.push([{ title: "测试", colspan: 2 }]);
            result.push(normal00000);

            return result;
        };

        var options = {
            title: "列表",
            idField: "ID",
            rownumbers: false,
            fit: true,
            border: false,
            singleSelect: true,
            toolbar: [{
                iconCls: 'icon-edit',
                text: "导出本页数据到excel",
                handler: function () {
                    $("#dg").datagrid("exportData", { fileType: "excel", fileName: "3号标题" });
                }
            }],
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "get",
            url: "/Jsons/datagrid/datagrid-export-data.json"
        };
        if (remote) {
            options.method = "post";
            options.url = "/Datagrid/GetDataGridJson";
            options.pagination = true;
            options.toolbar.push({
                iconCls: "icon-remove", text: "导出所有数据到excel", handler: function () {
                    $("#dg").datagrid("exportData", { fileType: "excel", fileName: "3号标题的后台所有数据", isAll: true });
                }
            });
        }

        $("#dg").datagrid(options);
    };

    //冻结列（简单，无合并）、常规列（简单，无合并）
    var datagridInit4 = function (remote) {

        var getFrozenColumns = function () {
            var result = [];

            var c1 = [];
            c1.push({ field: '333', title: '123', width: 100, checkbox: true });
            c1.push({ field: '444', title: '456', width: 100, hidden: true });
            c1.push({ field: 'AreaName', title: '地区', width: 150 });
            c1.push({
                field: 'Sex1', title: '男', width: 90,
                formatter: function (val) {
                    return val + "（男0）";
                }
            });
            c1.push({
                field: 'Sex2', title: '女', width: 90,
                formatter: function (val) {
                    return val + "（女1）";
                }
            });

            result.push(c1);

            return result;
        };

        var getColumns = function () {
            var result = [];

            var normal00000 = [
                { field: 'TS1', title: '测试1', width: 60 },
                { field: 'TS2', title: '测试2', width: 60 },
                { field: 'TS3', title: '测试3', width: 60, hidden: true },
                {
                    field: 'TS4', title: '测试4', width: 160,
                    formatter: function (val, row) {
                        return "<span style='color:red;'>我擦擦擦<span>" + val;
                    }
                },
                {
                    field: 'TS5', title: '测试5（显示对象中的属性）', width: 160,
                    formatter: function (val, row) {
                        return row.Obj != undefined ? row.Obj.OName : "不存在Obj对象";
                    }
                }
            ];
            result.push(normal00000);

            return result;
        };
        var options = {
            title: "列表",
            idField: "ID",
            rownumbers: false,
            fit: true,
            border: false,
            singleSelect: true,
            toolbar: [{
                iconCls: 'icon-edit',
                text: "导出本页数据到excel",
                handler: function () {
                    $("#dg").datagrid("exportData", { fileType: "excel", fileName: "4号标题" });
                }
            }],
            frozenColumns: getFrozenColumns(),
            columns: getColumns(),
            method: "get",
            url: "/Jsons/datagrid/datagrid-export-data.json"
        };
        if (remote) {
            options.method = "post";
            options.url = "/Datagrid/GetDataGridJson";
            options.pagination = true;
            options.toolbar.push({
                iconCls: "icon-remove", text: "导出所有数据到excel", handler: function () {
                    $("#dg").datagrid("exportData", { fileType: "excel", fileName: "4号标题的后台所有数据", isAll: true });
                }
            });
        }

        $("#dg").datagrid(options);
    };

    $(function () {

        var way = $.string.toBoolean("@remote");
        if (way) {
            $("#local").prop("checked", false);
            $("#remote").prop("checked", true);
        } else {
            $("#local").prop("checked", true);
            $("#remote").prop("checked", false);
        }
        var functionFormat = "function(remote){ datagridInit@(initType)(remote); }", func1 = $.string.toFunction(functionFormat);
        if ($.isFunction(func1)) {
            func1.call(this, way);
        }

        $("[id^='btn_']").click(function () {
            var num = this.id.split("_")[1];
            var newway = $("input[name='way']:checked").val() == "local" ? "false" : "true";
            window.location.href = "/Datagrid/ExportDemo?type=" + num + "&remote=" + newway;
        });
    });
</script>

